<template>
	<view>
		<view class="header">
			<view class="store-info">
				<image class="icon place"></image>
				<view class="title">预订餐厅</view>
				<view class="name">北京烤鸭（冉家坝店）</view>
				<view class="addr">渝北区锦橙路14号天邻风景小区1栋3-6号</view>
			</view>

			<view class="types">
				<view class="type" v-for="(item, index) in deskList" :key="index" @click="onCheckDesk(item)">
					<view class="icon"></view>
          {{ item.name }}
				</view>

			</view>
		</view>
		<view>
			<view class="cell">
				<view class="label">用餐人数</view>
				<input type="text" value="" placeholder="请输入数字" class="input" v-model="person_number" />
				<view class="value">人</view>
			</view>
      <picker mode="date" @change="onDateChange">
        <view class="cell">
          <view class="label">预计到店时间</view>
          <input type="text" value="" placeholder="选择时间" disabled class="input" :value="arrive_time" />
          <view class="arrow place"></view>
        </view>
      </picker>
			<view class="cell">
				<view class="label">预订费用</view>
				<view class="space"></view>
				<view class="value" style="color: #D82C2C;">￥50.00</view>
			</view>
			<view class="cell">
				<view class="label">预订手机号</view>
        <input type="number" maxlength="11" placeholder="请输手机号" class="input" v-model="phone" />
			</view>
		</view>
		<view class="tips">支付预订费用后可在线提前点餐，到了预订时间到店享用，预订 费用可用于到店后的用餐费用抵扣。</view>
		<view style="height: 88px;"></view>
		<view class="action-bar">
			<view class="price">
				<text>预订费用:</text><text class="value">￥50.00</text>
			</view>
			<view class="book-now" @click="onSubmit">立即预订</view>
		</view>
	</view>
</template>

<script>
import {storeMerchantDeskList, storeMerchantInsertMerchantReserve} from "@/api/2_store";

  export default {
		data() {
			return {
        id: '',
        //桌号列表
        deskList: [],
        //预计就餐人数
        person_number: '',
        //桌号id
        desk_id: '',
        //到店时间 “2021-09-09”
        arrive_time: '',
        //联系人手机
        phone: '',

			};
		},
    onLoad(options){
      this.id = options.id
      storeMerchantDeskList({
        id: options.id
      }).then(res=>{
        this.deskList = res.data.filter(i=>i.is_show == 0)
      })
    },
		methods: {
      onSubmit(){
        storeMerchantInsertMerchantReserve({
          person_number: this.person_number,
          desk_id: this.desk_id,
          arrive_time: this.arrive_time,
          phone: this.phone,
          mer_id: this.id,
        }).then(res=>{
          console.log(res)
          // uni.navigateTo({
          //   url: `/pages/2_development/store/book-result`
          // })
        })


			},
      onCheckDesk(item){
        if(item.status == 1){
          return 	this.$util.Tips({
            title: '不可预定'
          });
        }
        this.desk_id = item.id
      },

      onDateChange(e){
        this.arrive_time = e.detail.value
      }
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}
	.header{
		background-color: #fff;
		margin-bottom: 10px;
		padding-bottom: 15px;
	}
	.store-info{
		height: 102px;
		border-radius: 13px;
		background: #fff;
		box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
		margin: 15px;
		padding-top: 15px;
		padding-left: 40px;
		position: relative;
		.icon{
			width: 21px;
			height: 21px;
			position: absolute;
			top: 13px;
			left: 10px;
		}
		.title{
			font-size: 14px;
			line-height: 1;
			color: #999;
		}
		.name{
			font-weight: bold;
			font-size: 18px;
			line-height: 1;
			color: #0b0b0b;
			margin-top: 15px;
		}
		.addr{
			font-size: 14px;
			line-height: 1;
			color: #111;
			margin-top: 13px;
		}
	}

	.types{
		display: flex;
		margin-left: 27px;

		.type{
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #111;
			margin-right: 30px;
		}
		.icon{
			width: 16px;
			height: 16px;
			border-radius: 2px;
			background: #fff;
			border: 1px solid #999;
			margin-right: 8px;

		}
	}

	.cell{
		height: 44px;
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 15px;
		padding-right: 15px;
		background-color: #fff;
		.label{
			font-size: 14px;
			color: #111;
		}
		.space{
			flex: 1;
		}
		.value{
			font-size: 14px;
			color: #111;
		}
		.input{
			flex: 1;
			text-align: right;
			height: 44px;
			font-size: 14px;
			color: #333;
			margin-right: 15px;
			margin-left: 15px;
		}
		.arrow{
			width: 15px;
			height: 15px;
		}
		&:not(:last-child)::after{
			content: '\20';
			display: block;
			border-bottom: 1px solid #DCDCDC;
			position: absolute;
			right: 0;
			bottom: 0;
			left: 15px;
		}
	}
	.tips{
		padding: 20px 15px;
		font-size: 13px;
		line-height: 22px;
		color: #111;
	}


	.action-bar{
		height: 44px;
		background: #fff;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		padding-left: 15px;
		padding-right: 15px;
		.price{
			flex: 1;
			font-size: 16px;
			color: #999;
			.value{
				font-weight: bold;
				font-size: 25px;
				color: #d82c2c;
			}
		}
		.book-now{
			width: 135px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			border-radius: 16px;
			background: #0193ff;
			font-weight: bold;
			font-size: 16px;
			color: #fff;
		}
	}
</style>
